<template>
  <j-page ref="page" title="我的" :isBack="false">
    <navigator url="/pages/user/userInfo">
      <view class="user">
        <view class="u-flex">
          <u-avatar :src="src" size="120"></u-avatar>
          <view  class="user_info">
            <view class="user_info_nickname">{{userinfo.nickname || ""}}</view>
            <view class="user_info_phone">{{userinfo.phone || ""}}</view>
          </view>
        </view>
        <u-icon name="arrow-right" size="28" style="float: right" color="#909399"></u-icon>
      </view>
    </navigator>
    <u-cell-group>
      <navigator url="/pages/bill/bill">
        <u-cell-item title="账单">
          <view slot="icon" class="u_cell_icon">
            <u-image src="/static/icons/bill.svg" :width="40" :height="40"></u-image>
          </view>
        </u-cell-item>
      </navigator>
      <navigator url="/pages/wallet/wallet">
        <u-cell-item title="钱包" value="12.38">
          <view slot="icon" class="u_cell_icon">
            <u-image src="/static/icons/wallet.svg" :width="40" :height="40"></u-image>
          </view>
        </u-cell-item>
      </navigator>
      <u-cell-item title="优惠券">
        <view slot="icon" class="u_cell_icon">
          <u-image src="/static/icons/youhuiquan.svg" :width="44" :height="36"></u-image>
        </view>
      </u-cell-item>
    </u-cell-group>
    <u-gap height="30"></u-gap>
    <u-cell-group>
      <navigator url="/pages/help/help">
        <u-cell-item title="帮助手册">
          <view slot="icon" class="u_cell_icon">
            <u-image src="/static/icons/shouce.svg" :width="44" :height="44"></u-image>
          </view>
        </u-cell-item>
      </navigator>
      <u-cell-item title="客服">
        <view slot="icon" class="u_cell_icon">
          <u-image src="/static/icons/kefu.svg" :width="44" :height="44"></u-image>
        </view>
      </u-cell-item>
      <navigator url="/pages/setting/setting">
        <u-cell-item title="设置">
          <view slot="icon" class="u_cell_icon">
            <u-image src="/static/icons/setting.svg" :width="40" :height="40"></u-image>
          </view>
        </u-cell-item>
      </navigator>
    </u-cell-group>
  </j-page>
</template>

<script>
import {mapState} from "vuex"
export default {
  data() {
    return {
      src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
    };
  },
  computed:{
    ...mapState(["token", "userinfo"])
  }
}
</script>

<style lang="scss" scoped>
.user{
  height: 200rpx;
  padding: 13px 16px;
  justify-content: space-between;
  width: 100%;
  display: flex;
  align-items: center;

  &_info{
    margin-left: 30rpx;
    &_nickname{
      color: #909399;
      font-size: 38rpx;
      font-weight: 900;
    }
  }
}

</style>
